<template>
    <div style="min-width:809px">
        <div class="vs-search-box">
            <el-form ref="form" :inline="true" :model="paging" label-width="110px">
                <el-form-item label="门店：">
                    <el-select v-model="paging.store_id" style="width:250px" placeholder="请选择">
                        <el-option
                            v-for="item in shopList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="适用范围：">
                    <el-select v-model="paging.type" style="width:250px" placeholder="请选择">
                        <el-option label="首页" :value="2"> </el-option>
                        <el-option label="商城" :value="1"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="" class="vs-right-btns">
                    <el-button @click="reset">重置</el-button>
                    <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="vs-table-box">
            <div class="operation-box clear-float">
                <div class="title-left"> 
                    banner列表
                </div>
                <el-button style="margin-left:auto;" @click="add" type="primary">新增</el-button>
            </div>
            <el-table :data="tableData" :header-cell-style="{background:'#f5f6f8'}"  v-loading="loading" header-row-class-name="has-gutter-table" style="width: 100%">
                <el-table-column width="60px" type="selection" ></el-table-column>
                <el-table-column prop="store.title" label="门店" min-width="70"> </el-table-column>
                <el-table-column prop="title" label="适用范围" min-width="90">
                    <template slot-scope="scope">
                        {{['商场','门店首页'][scope.row.type-1]}}
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="标题" min-width="70"> </el-table-column>
                <el-table-column prop="url" label="图片">
                    <template slot-scope="scope">
                        <el-image  class="image-thumbnail" :src="scope.row.url" fit="cover" :preview-src-list="[scope.row.url]" >
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="排序">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.sort" size="mini" @change="handleChange(scope.row,$event)" :min="1"  ></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column prop="address"  fixed="right" width="109" label="操作"> 
                    <template slot-scope="scope">
                        <span class="tab-table-text" @click="setRow(1,scope.row)">编辑</span>
                        <span class="tab-table-text red" @click="setRow(2,scope.row)">删除</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
        :title="`${ruleForm.id?'修改':'新增'}banner`"
        :visible.sync="dialogVisible"
        width="700px"
        :before-close="handleClose">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm" >
            <el-form-item label="标题：" prop="title" class="ruleFormInput">
                <el-input  type="text" v-model="ruleForm.title"></el-input>
            </el-form-item>
            <el-form-item label="门店：" prop="store_id" class="ruleFormInput">
                <el-select v-model="ruleForm.store_id" placeholder="请选择">
                    <el-option
                        v-for="item in shopList"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="适用范围：" prop="type" class="ruleFormInput">
                <el-select v-model="ruleForm.type" placeholder="请选择适用范围">
                    <el-option label="商场"     :value="1"></el-option>
                    <el-option label="门店首页" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="banner图片：" prop="url" ref="url">
                <vs-uploading
                width="120px" 
                ref="uploading"
                v-model="ruleForm.url"
                ></vs-uploading>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false;handleClose()">取 消</el-button>
            <el-button type="primary" :loading="isBtn" @click="setAd">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
import VsUploading from '../../components/VsUploading'
export default {
    components:{
        VsUploading
    },
    data() {
        var url = (rule, value, callback) => {
            // 图片验证
            if (!this.ruleForm.url) { //hasFmt设置为true/false
                callback(new Error("请上传图片!"));
            } else {
                callback();
            }
        }
        return {
            isActive:true,
            paging:{
                type:'',
                store_id:'',
                page:1,
                total:0,
                limit:10,
            },
            ruleForm: {
                store_id:'',
                title: '',
                type:'',
                url:'',
            },
            shopList:[],
            rules:{
                url:{ required: true, message: '请上传图片!', trigger: 'blur' },
                type:{ required: true, message: '请选择适用范围', trigger: 'change' },
                store_id:{ required: true, message: '请选择门店', trigger: 'change' },
                title:{ required: true, message: '请输入标题', trigger: 'blur' },
            },
            dialogVisible:false,
            isBtn:false,
            loading:false,
            tableData: []
        };
    },
    created() {
        this.homegetStore();
        this.handleCurrentChange(1);
    },
    methods: {
        async homegetStore(){
            let {code,data} = await this.$Http.homegetStore();
            if(code){
                this.shopList = data;
            }
        },
        add(){
            this.dialogVisible = true;
        },
        reset(){//重置
            this.paging = this.$options.data().paging;
            // this.paging.store_id = this.shopList[0].id;
            this.handleCurrentChange(1)
        },
        verify(hasFmt,sta){
            if(sta){
                this.$refs[hasFmt].validate();
            }else this.$refs[hasFmt].clearValidate();
        },
        //排序 
        async handleChange(ele,value){
            let {code,data} = await this.$Http.adsetSort({sort:value,id:ele.id});
            if(code){
                let list = this.tableData;
                list.sort((a,b)=>a.sort-b.sort)
                list.reverse();
                this.tableData = list;
            }
        },
        setRow(type,row){
            if(type==1){
                this.dialogVisible = true;
                this.ruleForm = JSON.parse(JSON.stringify(row))
            }else{
                this.$msgbox({
                    title: '提示',
                    message: '确定要删除该banner吗?',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose:async (action, instance, done) => {
                        if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '执行中...';
                        let {code,data} = await this.$Http.delAd({id:row.id})
                            if(code){
                                this.$message.success('删除成功!');
                                this.handleCurrentChange(1)
                            }
                            done();
                            instance.confirmButtonLoading = false;
                        } else {
                            done();
                        }
                    }
                }).then(action => {

                }).catch(()=>{});
            }
        },
        setAd(){
            this.$refs['ruleForm'].validate(async valid => {
                if(!valid)return;
                this.isBtn = true;
                let obj = Object.assign({},this.ruleForm);
                // obj.url = obj.url.join(',')
                let {code,data} = await this.$Http.setAd(obj);
                this.isBtn = false;
                if(code){
                    this.$message.success((this.ruleForm.id?'修改':'添加')+"成功!");
                    this.dialogVisible = false;
                    this.handleClose()
                    this.handleCurrentChange(1)
                }
            })
        },
        handleClose(dom){
            dom&&dom();
            this.ruleForm = this.$options.data().ruleForm;
            this.$refs['ruleForm'].resetFields();
        },
        async getDataList(){
            this.loading = true;
            let {code,data} = await this.$Http.getAd(this.paging)
            this.loading = false;
            if(code){
                // data.forEach(v=>{
                //     if(v.url){
                //         v.url = v.url.split(',');
                //     }else v.url = [];
                // })
                this.tableData = data;
                // this.paging.total = data.total;
                console.log(this.tableData,"this.tableData");
            }
        },
        handleSizeChange(val){
             this.paging.limit = val;
            this.getDataList()
        },
        handleCurrentChange(val){
            this.paging.page = val;
            this.getDataList()
        },
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail{
    max-width: 200px;
    max-height: 140px;
}
video{
    max-width: 300px;
    max-height: 180px;
    width: 100%;
    object-fit: cover;
}
.red{
    color: #f00;
}
.ruleFormInput{
    ::v-deep{
        .el-input{
            // width: 300px;
        }
    }
}
</style>